<template>
  <el-drawer
    v-model="dialogFormVisible"
    :title="dialogTitle"
    size="80%"
    @close="handleClose"
  >
    <el-form
      :model="formData"
      ref="formRef"
      :rules="rules"
      label-position="right"
      label-width="80px"
      size="default"
      :scroll-to-error="true"
      :show-message="false"
    >
      <el-form-item
        label="选择模板"
        prop="tpl_id"
        class="required label-right-align"
        label-width="120px"
      >
        <el-select
          v-model="formData.tpl_id"
          placeholder="请选择模板"
          aria-label="请选择模板"
          style="width: 100%"
        >
          <el-option
            v-for="item in tpl_list"
            :key="item.id"
            :label="item.title"
            :value="item.id"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item
        label="选择用户"
        prop="user_id"
        class="label-right-align"
        label-width="120px"
        :disabled="formData.user_id"
        required
      >
        <el-select
          v-model="formData.user_id"
          filterable
          remote
          placeholder="输入用户ID/昵称/姓名/手机号进行搜索"
          remote-show-suffix
          :remote-method="searchUser"
          :loading="search_loading"
          style="width: 240px"
          default-first-option
        >
          <el-option
            v-for="item in userOptions"
            :key="item.user_id"
            :label="item.real_name ? item.real_name : item.nickName"
            :value="item.user_id"
          />
        </el-select>
      </el-form-item>
      <el-form-item
        label="内容"
        prop="content"
        class="required label-right-align"
        label-width="120px"
      >
        <Uediter
          v-model="formData.content"
          :config="ueditor.config"
          ref="ue"
        ></Uediter>
      </el-form-item>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="dialogClose">关闭</el-button>
        <el-button type="primary" @click="submitForm"> 提交 </el-button>
      </div>
    </template>
  </el-drawer>
</template>

<script setup lang="ts">
import {
  ref,
  reactive,
  defineExpose,
  defineEmits,
  onMounted,
  watch,
} from "vue";
import { ElMessage } from "element-plus";
import Uediter from "@/components/UE.vue";
import { getUserOption } from "@/api/user";
import { addContractApi, getTplListAPi } from "@/api/contract/contract";
const dialogFormVisible = ref(false);
const formRef = ref(null);
const search_loading = ref(false);
const userOptions = ref<any[]>([]);
const tpl_list = ref<any[]>([]);
const dialogTitle = ref("");
const ue = ref<any>(null);
/*富文本框配置*/
const ueditor = ref({
  text: "",
  config: {
    initialFrameWidth: 800,
    initialFrameHeight: 400,
  },
});
const props = defineProps({
  department: {
    type: Array,
    default: [] as any[],
  },
  classList: {
    type: Array,
    default: [] as any[],
  },
});
const formData = ref({
  tpl_id: 0,
  user_id: "",
  content: "",
});

const rules = reactive({
  tpl_id: [
    {
      required: true,
      message: "请选择模板",
    },
  ],
  user_id: [
    {
      required: true,
      message: "请选择用户",
    },
  ],
  content: [
    {
      required: true,
      message: "请输入内容",
    },
  ],
});

const emits = defineEmits(["getTable"]);
const contentChangeFunc = (e) => {
  formData.value.content = e;
};
function submitForm() {
  formRef.value.validate().then(() => {
    addContractApi(formData.value)
      .then((res) => {
        ElMessage.success("添加成功");
        emits("getTable");
        dialogClose();
      })
      .catch((err) => {});
  });
}

const dialogClose = () => {
  dialogFormVisible.value = false;
};

const dialogOpen = (id: number) => {
  dialogFormVisible.value = true;
  dialogTitle.value = "添加合同";
};

const handleClose = () => {
  formRef.value.resetFields();
  formData.value = {
    tpl_id: 0,
    user_id: "",
    content: "",
  };
  dialogFormVisible.value = false;
};
const searchUser = (query: string) => {
  if (query !== "") {
    search_loading.value = true;
    getUserOption({
      keyword: query,
    }).then((res: any) => {
      if (res.code == 1) {
        userOptions.value = res.data;
        search_loading.value = false;
      }
    });
  } else {
    userOptions.value = [];
  }
};
onMounted(() => {
  getTplListAPi().then((res: any) => {
    tpl_list.value = res.data.data;
  });
});
watch(
  () => formData.value.tpl_id,
  (newVal) => {
    if (newVal) {
      let tpl = tpl_list.value.find((item) => item.id == newVal);
      formData.value.content = tpl.content;
    } else {
      userOptions.value = [];
    }
  }
);
defineExpose({
  dialogOpen,
});
</script>

<style lang="scss">
.el-form-item {
  margin-bottom: 10px;
}
</style>

<style lang="scss" scoped></style>
